<!--
 * @Author: lilin_:）
 * @version: 1.0
 * @Descripttion:用户管理
 * @Date: 2021-08-29 18:13:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-03-30 11:46:25
-->
<template>
	<div class="system-user-container">
		<el-card class="box-card">
			<div class="my_user_top">
				<div class="my_btn_lay">
					<div class="my_flex my_btn" @click="addDefaultBlank">
						<div class="my_flex_layout">
							<i class="vxe-icon--plus"></i>
							<span>新增</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="deleteTable">
						<div class="my_flex_layout">
							<i class="fa fa-trash-o"></i>
							<span>删除</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="funnelEvent">
						<div class="my_flex_layout">
							<i class="vxe-icon--upload"></i>
							<span>导出</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="show_backups_button">
						<div class="my_flex_layout">
							<i class="fa fa-save"></i>
							<span>备份</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="printTab">
						<div class="my_flex_layout">
							<i class="vxe-icon--print"></i>
							<span>打印</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="showAmendFun">
						<div class="my_flex_layout">
							<i class="el-icon-edit"></i>
							<span>编辑</span>
						</div>
					</div>
					<div class="my_flex my_btn ml20" @click="editClosedEvent">
						<div class="my_flex_layout">
							<i class="el-icon-folder-add"></i>
							<span>保存</span>
						</div>
					</div>

					<div class="my_flex my_btn ml20" @click="getrolelistFun">
						<div class="my_flex_layout">
							<i class="el-icon-folder-opened"></i>
							<span>新增角色</span>
						</div>
					</div>
				</div>

				<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
					<span class="layout-navbars-breadcrumb-user-link">
						<img :src="getUserInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
						{{ getUserInfos.userName === '' ? 'test' : getUserInfos.userName }}
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
							<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>

			<!-- <vxe-toolbar ref="xToolbar" custom>
				<template #buttons>
					<vxe-button type="text" icon="fa fa-plus" content="新增" @click="addDefaultBlank"></vxe-button>
					<vxe-button type="text" icon="fa fa-trash-o" content="删除" @click="deleteTable"></vxe-button>
					<vxe-button type="text" icon="vxe-icon--zoomout" content="备份" @click="show_backups_button"></vxe-button>
				</template>
				<template #tools>
					<vxe-button type="text" icon="vxe-icon--print" class="tool-btn" @click="printTab"></vxe-button>
					<vxe-button type="text" icon="vxe-icon--download" class="tool-btn" @click="funnelEvent"></vxe-button>
				</template>
			</vxe-toolbar> -->
			<!-- :edit-config="{ trigger: 'manual', mode: 'row' }" -->
			<!-- @edit-closed="editClosedEvent" -->
			<vxe-table
				align="center"
				height="800"
				:scroll-x="{ enabled: false }"
				:scroll-y="{ enabled: false }"
				border
				keep-source
				ref="xTable1"
				:export-config="{}"
				resizable
				class="mytable-style mt20"
				:row-class-name="rowClassName"
				show-overflow
				:edit-config="{ trigger: 'manual', mode: 'row', icon: 'false' }"
				:data="tableData"
				:edit-rules="validRules"
				@checkbox-all="selectAllChangeEvent1"
				@checkbox-change="selectChangeEvent1"
			>
				<vxe-column type="checkbox" align="center" width="60"></vxe-column>
				<vxe-column type="seq" align="center" title="序号" width="60"></vxe-column>

				<vxe-column field="time" title="创建时间" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input readonly v-model="scope.row.time" placeholder="创建时间"></el-input>
					</template>
					<!-- <template v-slot="{ row }">{{ getSelectLabel(row.borrowerId, selectFrom.unitsData) }}</template> -->
				</vxe-column>

				<vxe-column field="name" title="用户名" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
				<vxe-column field="username" title="账号" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>
				<vxe-column field="password" title="密码" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-column>

				<vxe-column field="roleIds" title="权限" :edit-render="{}">
					<template v-slot:edit="scope">
						<el-select clearable multiple collapse-tags v-model="scope.row.roleIds" placeholder="请选择">
							<el-option v-for="item in roleFrom.shoWData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
						</el-select>
					</template>
					<template v-slot="{ row }">{{ getShowTableNameAll(row.roleIds) }}</template>
				</vxe-column>
				<!-- 
				<vxe-column field="roleIds" title="权限" :edit-render="{}">
					<template #default="{ row }">
						<span>{{ getShowTableNameAll(row.roleIds) }}</span>
					</template>
					<template #edit="{ row }">
						{{ row.roleIds }}
						<vxe-select v-model="row.roleIds" multiple transfer>
							<vxe-option v-for="item in roleFrom.shoWData" :key="item.id" :label="item.name" :value="item.id"></vxe-option>
						</vxe-select>
					</template>
				</vxe-column> -->

				<vxe-column field="lastTime" title="最后登陆时间" :edit-render="{ type: 'default' }">
					<template v-slot:edit="scope">
						<el-input readonly v-model="scope.row.lastTime" placeholder="创建时间"></el-input>
					</template>
					<!-- <template v-slot="{ row }">{{ getSelectLabel(row.borrowerId, selectFrom.unitsData) }}</template> -->
				</vxe-column>
			</vxe-table>
		</el-card>
		<!-- 弹窗 -->

		<vxe-modal v-model="backups.isShow" title="备份" width="600" height="400" show-zoom resize remember>
			<template #default>
				<vxe-toolbar>
					<template #buttons>
						<vxe-button icon="vxe-icon--zoomout" @click="backups_button()">备份文件</vxe-button>
						<!-- <vxe-button type="text" icon="fa fa-plus" content="新增" @click="addDefaultBlank"></vxe-button> -->
					</template>
				</vxe-toolbar>
				<vxe-table height="280" border show-overflow :data="backups.showData">
					<vxe-column field="name" title="备份名字"></vxe-column>
					<vxe-column title="操作" width="158">
						<template #default="{ row }">
							<vxe-button @click="backupsreduction_button(row)">还原</vxe-button>
							<vxe-button status="primary" @click="delete_button(row)">删除</vxe-button>
						</template>
					</vxe-column>
				</vxe-table>
			</template>
		</vxe-modal>

		<!-- 新增角色弹窗 -->
		<vxe-modal v-model="roleFrom.isshow" title="新增角色" width="600" height="420" show-zoom resize remember>
			<template #default>
				<vxe-toolbar perfect>
					<template #buttons>
						<vxe-button icon="fa fa-plus" status="perfect" content="新增" @click="addbankShow"></vxe-button>
						<vxe-button icon="fa fa-trash-o" status="perfect" content="删除" @click="deleteTable_show"></vxe-button>
					</template>
				</vxe-toolbar>
				<vxe-table
					border
					:height="300"
					show-overflow
					ref="xTableShow"
					:data="roleFrom.shoWData"
					:edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
					@checkbox-all="selectAllChangeEvent_show_jurisdiction"
					@checkbox-change="selectChangeEvent_show_jurisdiction"
					@edit-closed="editClosedEvent_show_jurisdiction"
				>
					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
					<vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
					<vxe-column field="name" title="角色名称" :edit-render="{ name: 'input' }"></vxe-column>
					<vxe-column field="tableName" title="模块" :edit-render="{ type: 'default' }">
						<template v-slot:edit="scope">
							<el-select clearable filterable v-model="scope.row.tableName">
								<el-option v-for="item in roleFrom.modularData" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</template>
						<template v-slot="{ row }">{{ getShowTableName(row.tableName, roleFrom.modularData) }}</template>
					</vxe-column>

					<vxe-column field="role" title="权限" :edit-render="{ type: 'default' }">
						<template v-slot:edit="scope">
							<el-select clearable filterable v-model="scope.row.role">
								<el-option v-for="item in roleFrom.jurisdictionData" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</template>
						<template v-slot="{ row }">{{ getShowTableName(row.role, roleFrom.jurisdictionData) }}</template>
					</vxe-column>
				</vxe-table>
			</template>
		</vxe-modal>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, ref, toRaw, onMounted, nextTick, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
	// 用户管理接口
	axios_userlList,
	axios_useradd,
	axios_userdel,
	axios_userup,
	axios_datasel, //备份列表
	axios_datareduction, //还原列表
	axios_databackup, //备份数据
	axios_datadel, //删除备份
	axios_roleselList,
	axios_roleAdd,
	axios_roleup,
	axios_roledel,
} from '/@/api/basicsUrl/index';
import { useRouter } from 'vue-router';
import {
	// 用户管理接口
	axios_logout,
} from '/@/api/basicsUrl/index';
import { Session, Local } from '/@/utils/storage';
import { useI18n } from 'vue-i18n';
import { resetRoute } from '/@/router/index';
import { useStore } from '/@/store/index';
import { GenNonDuplicateID } from '/@/utils/formatTime';
import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
import { json } from 'node:stream/consumers';
export default {
	name: 'BorrowMoney',
	setup() {
		const router = useRouter();
		const { t } = useI18n();
		const store = useStore();
		const xTable1 = ref({} as VxeTableInstance);
		const xToolbar = ref({} as VxeToolbarInstance);
		const validRules = ref({
			name: [{ required: true, message: '用户名称必填' }],
			username: [{ required: true, message: '账户必填' }],
			password: [{ required: true, message: '密码必填' }],
			role: [{ required: true, message: '权限必选' }],
		} as VxeTablePropTypes.EditRules);

		// 打印样式
		// 打印样式
		const printStyle = `
            .title {
              text-align: center;
            }
            .my-list-row {
              display: inline-block;
              width: 100%;
            }
            .my-list-col {
              float: left;
              width: 33.33%;
              height: 28px;
              line-height: 28px;
            }
            .my-top,
            .my-bottom {
              font-size: 12px;
            }
            .my-top {
              margin-bottom: 5px;
            }
            .my-bottom {
              margin-top: 30px;
              text-align: right;
            }
            `;

		// 打印顶部内容模板
		const topHtml = `
            <h1 class="title">出货单据</h1>
            <div class="my-top">
              <div class="my-list-row">
                <div class="my-list-col">商品名称： </div>
                <div class="my-list-col">发货单号：X2665847132654</div>
                <div class="my-list-col">发货日期：2020-09-20</div>
              </div>
              <div class="my-list-row">
                <div class="my-list-col">收货姓名： </div>
                <div class="my-list-col">收货地址：火星第七区18号001</div>
                <div class="my-list-col">联系电话：10086</div>
              </div>
            </div>
            `;

		// 打印底部内容模板
		const bottomHtml = `
            <div class="my-bottom">
              <div class="my-list-row">
                <div class="my-list-col"></div>
                <div class="my-list-col">创建人： </div>
                <div class="my-list-col">创建日期：2020-09-20</div>
              </div>
            </div>
            `;

		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});

		/**
		 * @Author: lilin_:）
		 * @name: 默认空白数组
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		let defaultBlankData = [
			{
				iswebAdd: true,
				webid: GenNonDuplicateID(),
				name: '',
				username: '',
				password: '',
			},
		];

		let defaultBlankrol = [
			{
				iswebAdd: true,
				webid: GenNonDuplicateID(),
				name: '', //名字
				role: '', //权限
				tableName: '', //模块名字
			},
		];

		const state: any = reactive({
			addList: [], //前端加的数据
			responseData: [], //后端返回的数据
			selectFrom: {
				time: '', //时间
				contactPerson: '', //联系人
				type: '', //单位类型1供应商2客户3公司员工
				roleData: [
					{ label: 'ADMIN', value: 'ADMIN' },
					{ label: 'USER', value: 'USER' },
				], //单位类型1供应商2客户3公司员工
				unitsData: [], //单位搜索的数据和联系人一样
			},
			// 备份数据
			backups: {
				isShow: false,
				showData: [], //数据
			},
			tableData: [], //表格数据
			selecttableData: [], //选择的数组

			// 角色权限
			roleFrom: {
				isShow: false, //是否展示
				shoWData: [], //数据源
				shoWDataShow: [], //数据源2
				selectData: [], //选择
				modularData: [
					{
						value: 'fptz',
						label: '发票台账',
					},
					{
						value: 'fkmx',
						label: '付款明细',
					},
					{
						value: 'txl',
						label: '通讯录',
					},
					{
						value: 'khmxz',
						label: '客户明细账',
					},
					{
						value: 'gysfp',
						label: '供应商发票查询',
					},
					{
						value: 'cnmxb',
						label: '出纳明细表',
					},
					{
						value: 'tcmxb',
						label: '提成明细表',
					},
					{
						value: 'httz',
						label: '合同台账',
					},
					{
						value: 'sptz',
						label: '商票台账',
					},
					{
						value: 'jkmx',
						label: '借款明细',
					},

					{
						value: 'skmx',
						label: '收款明细',
					},
					{
						value: '0',
						label: '全部权限',
					},
				], //模块数据
				jurisdictionData: [
					{
						value: '0',
						label: '只读',
					},
					{
						value: '1',
						label: '读写',
					},
					{
						value: '2',
						label: '读删',
					},
					{
						value: '3',
						label: '所有',
					},
				], //权限
			},
		});

		const selectAllChangeEvent1: VxeTableEvents.CheckboxAll = ({ checked, records }: any) => {
			console.log(checked ? '所有勾选事件' : '所有取消事件', records);
			state.selecttableData = records;
		};

		const selectChangeEvent1: VxeTableEvents.CheckboxChange = ({ checked, records }: any) => {
			state.tableData.forEach((item2: any) => {
				item2.hghligHt = false;
			});

			console.log(checked ? '勾选事件' : '取消事件', records);
			state.selecttableData = records;
			state.selecttableData.forEach((item: any) => {
				if (item.iswebAdd) {
					// 前端的数据
					state.tableData.forEach((item2: any) => {
						if (item.webid == item2.webid) {
							item2.hghligHt = true;
						}
					});
				} else {
					state.tableData.forEach((item2: any) => {
						if (item.id == item2.id) {
							item2.hghligHt = true;
						}
					});
				}
			});
		};

		/**
		 * @Author: lilin_:）
		 * @name: 获取借款明细
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const get_TabaDat = () => {
			axios_userlList().then((res: any) => {
				// console.log(res, '1111111111');
				if (res.code == 200) {
					// 重置数据
					state.addList = [];
					// 添加20条数据
					for (let index = 0; index < 20; index++) {
						state.addList.push(
							defaultBlankData.map((item: any) => {
								return {
									...item,
									...{
										webid: GenNonDuplicateID(),
									},
								};
							})[0]
						);
					}
					// 存储数组索引
					state.responseData = res.obj;
					state.selecttableData = [];
					state.tableData = [...state.responseData, ...state.addList];
					// console.log(state.insertIndex, 'state.insertIndex');
				}
			});
		};

		const searchEvent: VxeFormEvents.Submit = async () => {
			get_TabaDat();
			// VXETable.modal.message({ content: '查询事件', status: 'info' });
		};

		/**
		 * @Author: lilin_:）
		 * @name: 重置搜索表单
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const resetEvent: VxeFormEvents.Reset = async () => {
			state.selectFrom.time = ''; //清空时间
			state.selectFrom.contactPerson = ''; //单位名称
			await get_TabaDat();
			// VXETable.modal.message({ content: '重置事件', status: 'info' });
		};

		onMounted(() => {
			getRoleData();
			// getProjectName(); //单位名称
			get_TabaDat();

			// let a = GenNonDuplicateID()
			// console.log(a)
		});

		//实时更新
		const editClosedEvent: VxeTableEvents.EditClosed = ({ row, column }) => {
			if (state.selecttableData.length == 1) {
				let row = state.selecttableData[0];

				console.log(toRaw(row), '11111');

				if (row.iswebAdd) {
					// 走保存接口
					// console.log(toRaw(row), '我是前端提交');
					axios_useradd(row).then((res) => {
						// console.log(res, '是否啊添加');
						if (res.code == 200) {
							get_TabaDat();
							VXETable.modal.message({ content: '新增成功!', status: 'success' });
						}
					});
				} else {
					axios_userup(row).then((res) => {
						if (res.code == 200) {
							get_TabaDat();
							VXETable.modal.message({ content: '编辑成功！', status: 'success' });
						}
					});
				}
			} else if (state.selecttableData.length == 0) {
				VXETable.modal.message({ content: '您还没有选中行', status: 'warning' });
			} else {
				VXETable.modal.message({ content: '只能选中一行编辑', status: 'warning' });
			}

			// 判断单元格值是否被修改;
			// if ($table.isUpdateByRow(row, field)) {
			// 	setTimeout(() => {
			// 		VXETable.modal.message({
			// 			content: `局部保存成功！ ${field}=${cellValue}`,
			// 			status: 'success',
			// 		});
			// 		// 局部更新单元格为已保存状态
			// 		$table.reloadRow(row, null, field);
			// 	}, 300);
			// }
		};

		/**
		 * @Author: lilin_:）
		 * @name: 关联表格
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		nextTick(() => {
			// 将表格和工具栏进行关联
			const $table = xTable1.value;
			const $toolbar = xToolbar.value;
			$table.connect($toolbar);
		});

		/**
		 * @Author: lilin_:）
		 * @name: 新增空白行
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const addDefaultBlank = () => {
			const $table = xTable1.value;
			$table.scrollToRow($table.getData(20));
			// console.log($table.getData(20), '111');
			let addArry = defaultBlankData.map((item: any) => {
				return {
					...item,
					...{
						webid: GenNonDuplicateID(),
						hghligHt: true,
					},
				};
			});
			// console.log(addArry, 'addArry');
			let row = addArry[0];
			// let showArry = JSON.parse(JSON.stringify(state.addList)); // state.responseData.push(row);
			state.addList.unshift(row);
			state.tableData = [...state.responseData, ...state.addList];
			// const $table = xTable1.value;
			// console.log(state.tableData, 'state.tableData');
			$table.setActiveRow(row);
			//清空选择的数据
			$table.clearCheckboxRow();
			$table.toggleCheckboxRow(state.addList[0]); //默认选中第一行
			state.selecttableData = [state.addList[0]]; //拿到选择数据
			ElMessage.success({
				message: '新增1行空白栏',
				type: 'success',
			});
			// 计算滚动高度
			let heightpx = state.responseData.length * 20;
			setTimeout(() => {
				document.getElementsByClassName('vxe-table--body-wrapper')[0].scrollTo(0, heightpx);
			}, 100);
		};

		/**
		 * @Author: lilin_:）
		 * @name: 删除数据
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const deleteTable: any = async () => {
			let webAddArry: any = [];
			let reeData: any = [];
			state.selecttableData.forEach((item: any) => {
				if (item.iswebAdd == true) {
					webAddArry.push(item);
				} else {
					reeData.push(item);
				}
			});
			// 判断前端数据是否有值
			let webDelet = () => {
				if (webAddArry.length != 0) {
					// 前端删除
					state.addList = state.addList.filter((item: any) => {
						return !webAddArry.find((_item: any) => _item.webid === item.webid);
					});
					// 修复删除bug
					// webAddArry.forEach((webitem: any) => {
					// 	state.tableData.forEach((item: any, index: any) => {
					// 		if (item.webid == webitem.webid) {
					// 			// console.log(item, 'item');
					// 			state.tableData.splice(index, 1);
					// 		}
					// 	});
					// });
					// console.log(state.tableData, 'arry');
					// console.log(webAddArry, 'arry');
					state.selecttableData = [];
					state.tableData = [...state.responseData, ...state.addList];
					// console.log(state.tableData, 'state.tableData');
				}
			};

			let resDelet = async () => {
				if (reeData.length != 0) {
					let { code }: object = await axios_userdel(
						reeData.map((item: any) => {
							return item.id;
						})
					);

					// console.log(code, '11111111');
					if (code == 200) {
						get_TabaDat();
					}
				}
			};
			await resDelet();
			await webDelet();
		};

		/**
		 * @Author: lilin_:）
		 * @name: 高级导出功能
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const funnelEvent = () => {
			const $table = xTable1.value;
			$table.openExport();
		};

		const showAmendFun = () => {
			if (state.selecttableData.length == 1) {
				let row = state.selecttableData[0];
				row.hghligHt = true;
				const $table = xTable1.value;
				$table.setActiveRow(row);
			} else if (state.selecttableData.length == 0) {
				VXETable.modal.message({ content: '您还没有选中行', status: 'warning' });
			} else {
				VXETable.modal.message({ content: '只能选中一行编辑', status: 'warning' });
			}
		};

		/**
		 * @Author: lilin_:）
		 * @name: 打印表格
		 * @Descripttion:
		 * @param {*}
		 * @return {*}
		 */
		const printTab = () => {
			const $table = xTable1.value;
			$table.print({
				sheetName: '打印发票台账',
				style: printStyle, //自定义样式
				columns: [{ type: 'id' }, { field: 'name' }, { field: 'username' }, { field: 'role' }, { field: 'lastTime' }, { field: 'password' }],
				beforePrintMethod: ({ content }) => {
					// 拦截打印之前，返回自定义的 html 内容
					// return topHtml + content + bottomHtml;
					return content;
				},
			});
		};

		// 展示内容下拉搜索
		const getSelectLabel = (value, list) => {
			// let item = list.flutter((item) => item.value == value);
			console.log(toRaw(list), '111');

			let item = list.filter((item) => {
				return item.value == value;
			});
			let showitem = console.log(toRaw(item), '2');

			// return item ? item.value : null;
		};

		// 备份树数据方法
		// 获取备份
		let getbackups_data = async () => {
			let { code, obj } = await axios_datasel();
			if (code == 200) {
				let data = obj.map((item) => {
					return {
						name: item,
					};
				});
				state.backups.showData = data;
			}
			return code;
		};
		// 备份按钮弹窗
		let show_backups_button = async () => {
			let code = await getbackups_data();
			// console.log(code, '11111');
			if (code == 200) {
				state.backups.isShow = true;
			}
		};
		// 备份
		let backups_button = () => {
			// console.log(item,'11111')
			axios_databackup().then((res) => {
				if (res.code == 200) {
					getbackups_data();
				}
			});
		};

		// 删除
		let delete_button = (item: any) => {
			let data = [item.name];
			// console.log(toRaw(data), '11111111111');
			axios_datadel(data).then((res: any) => {
				if (res.code == 200) {
					getbackups_data();
				}
			});
		};
		// 还原数据
		let backupsreduction_button = (item: any) => {
			axios_datareduction({
				name: item.name,
			}).then((res) => {
				if (res.code == 200) {
					getbackups_data();
				}
			});
		};

		// 测试编辑表格
		const editRowEvent = (row: ItemVO) => {
			const $table = xTable1.value;
			$table.setActiveRow(row);
		};

		const saveRowEvent = (row: any) => {
			const $table = xTable1.value;
			$table.clearActived().then(() => {
				// 处理逻辑代码
				// console.log(row, 'row ');
				if (row.iswebAdd) {
					// 走保存接口
					// console.log(toRaw(row), '我是前端提交');
					axios_useradd(row).then((res) => {
						// console.log(res, '是否啊添加');
						if (res.code == 200) {
							get_TabaDat();
							VXETable.modal.message({ content: '新增成功!', status: 'success' });
						}
					});
				} else {
					axios_userup(row).then((res) => {
						if (res.code == 200) {
							get_TabaDat();
							VXETable.modal.message({ content: '编辑成功！', status: 'success' });
						}
					});
				}
			});
		};

		const cancelRowEvent = (row: ItemVO) => {
			const $table = xTable1.value;
			$table.clearActived().then(() => {
				// 还原行数据
				$table.revertData(row);
				VXETable.modal.message({ content: '取消保存，数据还原', status: 'warning' });
			});
		};
		// 改变颜色样式
		const rowClassName: VxeTablePropTypes.RowClassName = ({ row }) => {
			// console.log(row, 'rowIndex');
			if (row.hghligHt) {
				return 'row-green';
			}
			return null;
		};

		// 新增角色弹窗内容
		const getrolelistFun = async () => {
			await getRoleData();
			state.roleFrom.isshow = true;
		};
		// 获取角色数据
		const getRoleData = async () => {
			let { code, obj }: any = await axios_roleselList();
			if (code == 200) {
				state.roleFrom.shoWData = obj;
				state.roleFrom.shoWDataShow = obj;
			}
		};

		const selectAllChangeEvent_show_jurisdiction: VxeTableEvents.CheckboxAll = ({ checked, records }: any) => {
			console.log(checked ? '所有勾选事件' : '所有取消事件', records);
			state.roleFrom.selectData = records;
		};

		const selectChangeEvent_show_jurisdiction: VxeTableEvents.CheckboxChange = ({ checked, records }: any) => {
			state.roleFrom.selectData = records;
			console.log(checked ? '勾选事件' : '取消事件', records);
		};

		//实时更新弹窗
		const editClosedEvent_show_jurisdiction: VxeTableEvents.EditClosed = ({ row, column }) => {
			// let getRow: any = row;
			if (row.iswebAdd) {
				//走保存接口
				axios_roleAdd(row).then((res: any) => {
					if (res.code == 200) {
						getRoleData();
					}
				});
			} else {
				axios_roleup(row).then((res: any) => {
					if (res.code == 200) {
						getRoleData();
					}
				});
			}
		};

		//回显模块
		const getShowTableName = (value, list) => {
			let item = list.find((item) => item.value == value);
			// console.log(item,'item')
			return item ? item.label : null;
		};

		const getShowTableNameAll = (valuearry) => {
			// console.log(valuearry, 'valuearry');
			// console.log(list, 'list');
			if (valuearry == undefined) {
				return;
			}

			let list: any = JSON.parse(JSON.stringify(state.roleFrom.shoWDataShow));

			let showArry: any = [];
			list.forEach((list_item: any) => {
				valuearry.forEach((valuearry_itme: any) => {
					if (valuearry_itme == list_item.id) {
						showArry.push(list_item.name);
					}
				});
			});

			let stringName = showArry.join(',');

			return stringName ? stringName : null;
		};

		// 银行数据新增
		const addbankShow = () => {
			let addArry = defaultBlankrol.map((item: any) => {
				return {
					...item,
					...{
						webid: GenNonDuplicateID(),
					},
				};
			});
			state.roleFrom.shoWData = JSON.parse(JSON.stringify([...state.roleFrom.shoWData, ...addArry]));
			// console.log(toRaw(state.tableData), '11111111111');
			ElMessage.success({
				message: '新增1行空白栏',
				type: 'success',
			});
		};

		// 弹窗删除
		const deleteTable_show: any = async () => {
			let webAddArry: any = [];
			let reeData: any = [];
			state.roleFrom.selectData.forEach((item: any) => {
				if (item.iswebAdd == true) {
					webAddArry.push(item);
				} else {
					reeData.push(item);
				}
			});
			// 判断前端数据是否有值
			let webDelet = () => {
				if (webAddArry.length != 0) {
					// 前端删除
					state.roleFrom.shoWData = state.roleFrom.shoWData.filter((item: any) => {
						return !webAddArry.find((_item: any) => _item.webid === item.webid);
					});
				}
			};

			let resDelet = async () => {
				if (reeData.length != 0) {
					let { code }: any = await axios_roledel(
						reeData.map((item: any) => {
							return item.id;
						})
					);
					// console.log(code, '11111111');
					if (code == 200) {
						getRoleData();
					}
				}
			};
			await resDelet();
			await webDelet();
		};

		// 下拉菜单点击时
		const onHandleCommandClick = (path: string) => {
			if (path === 'logOut') {
				// console.log(Session.get('token'),'我进入了111111111111111111111')

				axios_logout({
					token: Session.get('token'),
				}).then((res) => {
					console.log(res, '111111');
					ElMessageBox({
						closeOnClickModal: false,
						closeOnPressEscape: false,
						title: t('message.user.logOutTitle'),
						message: t('message.user.logOutMessage'),
						showCancelButton: true,
						confirmButtonText: t('message.user.logOutConfirm'),
						cancelButtonText: t('message.user.logOutCancel'),
						beforeClose: (action, instance, done) => {
							if (action === 'confirm') {
								instance.confirmButtonLoading = true;
								instance.confirmButtonText = t('message.user.logOutExit');
								setTimeout(() => {
									done();
									setTimeout(() => {
										instance.confirmButtonLoading = false;
									}, 300);
								}, 700);
							} else {
								done();
							}
						},
					})
						.then(() => {
							Session.clear(); // 清除缓存/token等
							resetRoute(); // 删除/重置路由
							router.push('/login');
							setTimeout(() => {
								ElMessage.success(t('message.user.logOutSuccess'));
							}, 300);
						})
						.catch(() => {});
				});
			} else if (path === 'wareHouse') {
				window.open('https://gitee.com/lyt-top/vue-next-admin');
			} else {
				router.push(path);
			}
		};
		return {
			...toRefs(state),
			getUserInfos,
			onHandleCommandClick,
			editClosedEvent, //实时更新
			xToolbar, //关联表格
			xTable1, //表格
			addDefaultBlank, //新增空白行
			deleteTable, //删除数据
			funnelEvent, //导出数据
			printTab, //打印

			showAmendFun, //展示编辑行
			getSelectLabel,
			show_backups_button, //备份按钮
			backups_button,
			backupsreduction_button,
			delete_button, //删除按钮
			selectAllChangeEvent1,
			selectChangeEvent1,
			input: ref(''),
			searchEvent,
			resetEvent,
			// -----------
			editRowEvent,
			saveRowEvent,
			cancelRowEvent,
			validRules,
			rowClassName,
			selectAllChangeEvent_show_jurisdiction, //新增选择角色
			selectChangeEvent_show_jurisdiction,
			editClosedEvent_show_jurisdiction,
			getrolelistFun,
			getShowTableName,
			getShowTableNameAll,
			addbankShow,
			deleteTable_show,
		};
	},
};
</script>

<style scoped lang="scss">
.mytable-style ::v-deep .vxe-body--row.row-green {
	background-color: #bbb;
	color: #fff;
}
// 更改滚动条样式

.my_user_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.layout-navbars-breadcrumb-user {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	&-link {
		height: 100%;
		display: flex;
		align-items: center;
		white-space: nowrap;
		&-photo {
			width: 25px;
			height: 25px;
			border-radius: 100%;
		}
	}
	&-icon {
		padding: 0 10px;
		cursor: pointer;
		color: var(--bg-topBarColor);
		height: 50px;
		line-height: 50px;
		display: flex;
		align-items: center;
		&:hover {
			background: rgba(0, 0, 0, 0.04);
			i {
				display: inline-block;
				animation: logoAnimation 0.3s ease-in-out;
			}
		}
	}
	::v-deep(.el-dropdown) {
		color: var(--bg-topBarColor);
	}
	::v-deep(.el-badge) {
		height: 40px;
		line-height: 40px;
		display: flex;
		align-items: center;
	}
	::v-deep(.el-badge__content.is-fixed) {
		top: 12px;
	}
}
</style>
